import { Breadcrumbs } from '@material-ui/core';
import React, { useState } from 'react';
import { VirtualizedList } from '../../components/VirtualizedList';
import { useDirectory } from '../../context';
import { useDebounce } from '../../util';
import { FileList } from './FileList';
import TopBar from './TopBar';

export interface ListItemType {
  id: number;
  name: string;
  type: string;
  size: number;
  lastModified: number;
}
export const HomePage = () => {
  const [keyword, setKeyword] = useState('');
  const [listData, setListData] = useState<ListItemType[]>([]);
  const { directory } = useDirectory();
  const debouncedKeyword = useDebounce(keyword, 400);
  return (
    <>
      <TopBar keyword={keyword} setKeyword={setKeyword} setListData={setListData} />
      <div style={{ marginTop: '60px' }}>
        <Breadcrumbs style={{ padding: '8px 16px' }}>
          <span>{directory.join('\\')}</span>
        </Breadcrumbs>
        {listData.length > 100 ? (
          <VirtualizedList
            keyword={debouncedKeyword}
            listData={listData}
            setListData={setListData}
          />
        ) : (
          <FileList keyword={debouncedKeyword} listData={listData} setListData={setListData} />
        )}
      </div>
    </>
  );
};
